<template>
	<view class="page">
		<view class="container">
			<button @click="subscribeMsg" class="subscribe-button">订阅消息</button>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			subscribeMsg() {
				// 模板 ID 数组
				const tmplIds = ['j15yj3pp6BVvT6oegd97XAMlFbHwtk1CmE6zL_IwEUA'];

				wx.requestSubscribeMessage({
					tmplIds: tmplIds,
					success: (res) => {
						console.log('用户订阅结果:', res);
						if (res[tmplIds[0]] === 'accept') {
							// 调用后端接口，让后端去发送消息
							uni.login({
								provider: 'weixin',
								success: (loginRes) => {

									this.sendSubscribe(loginRes.code, tmplIds);


								}
							});
						}
					}
				});
			},
			async sendSubscribe(code, tmplIds) {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.sendSubscribeMsg,
					data: {
						code: code,
						templateId: tmplIds[0]
					},
					needLogin: true
				})
				if (res.code == 1) {
					// console.log(res.data)
					uni.showModal({
						title: "订阅成功"
					})
				}
			}
		}
	}
</script>

<style>
	/* 页面容器，占满屏幕 */
	.page {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* 中间容器，垂直水平居中 */
	.container {
		flex: 1;
		/* 占满剩余空间 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	/* 圆形按钮样式 */
	.subscribe-button {
		width: 200rpx;
		height: 200rpx;
		background-color: #007aff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		/* 按钮文字水平居中 */
		align-items: center;
		/* 按钮文字垂直居中 */
		color: white;
		font-size: 32rpx;
		border: none;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
		/* 阴影可选 */
	}
</style>